<template>
  <div>
    <router-view v-if="!$route.meta.show_site" />
    <el-container v-if="$route.meta.show_site">
      <div @mouseenter="change_aside_menu('enter')" @mouseleave="change_aside_menu('leave')">
        <el-aside :width="isCollapse?'65px':'200px'">
          <Aside :Collapse="isCollapse"></Aside>
        </el-aside>
      </div>
      <el-container>
        <el-header>
          <Header></Header>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <Footer></Footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Aside from "@/unitui/ui/Aside.vue";
import Header from "@/unitui/ui/Header.vue";
import Footer from "@/unitui/ui/Footer.vue";
export default {
  components: {
    Aside,
    Header,
    Footer
  },
  data() {
    return {
      isCollapse:true,
    };
  },
  methods: {
    change_aside_menu(data) {
      if (data == "enter") {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    }
  },
  mounted() {}
};
</script>
<style>
</style>
